<template>
  <div>
    <el-table border :data="list" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="pet_name" label="宠物名">
        </el-table-column>
        <el-table-column label="阶段">
            <template slot-scope="scope">
                <p>{{scope.row.degree}}</p>
            </template>
        </el-table-column>
        <el-table-column label="是否已设置退化">
            <template slot-scope="scope">
                <p v-if="scope.row.pre_id==''">否</p>
                <p v-if="scope.row.pre_id!=''">是</p>
            </template>
        </el-table-column>
        <el-table-column label="是否已设置进化">
            <template slot-scope="scope">
                <p v-if="scope.row.ev_ids.length==0">否</p>
                <p v-if="scope.row.ev_ids.length!=0">是</p>
            </template>
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑进化线</el-button>
        </template>
        </el-table-column>
    </el-table>
   
    <common-modal v-show="is_show" v-on:closeme="closeEdit" v-on:confirm="confirmEdit">
        <h3 slot="header-title">编辑进化线</h3>
        <div slot="body" class="evolve-box">
            <div class="pre-evolve">
                <div>
                    <p>选择退化后的宠物模板：</p>
                </div>
                <div class="select-box">
                    <div v-for="(item,i) in list" :key="i">
                        <el-radio v-model="pre_id" :label="item._id">{{item.pet_name}}</el-radio>
                    </div>                                      
                </div>
            </div>
            <div class="evolved">
                <div>
                    <p>选择进化后的宠物模板：</p>
                </div>
                <div class="select-box">
                    <el-checkbox-group v-model="ev_ids">
                        <div v-for="(item,i) in list" :key="i">
                            <el-checkbox :label="item._id">{{item.pet_name}}</el-checkbox>
                        </div> 
                    </el-checkbox-group>
                </div>
            </div>
        </div>
    </common-modal>

  </div>
</template>

<script>
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              list:[],
              cur_select_pet_template_id:"",
              pre_id:"",
              ev_ids:[],
              is_show:false,
          }
      },
      mounted:function(){
        this.getPetTemplates()
      },
      methods:{
          edit(row){
              this.is_show=true;
              this.cur_select_pet_template_id=row._id
          },
          getPetTemplates(){
            this.$ajax({
                method: 'get',
                url: 'get_all_pet_templates',

            }).
            then(res => {
                this.list=res.data.res_msg
                console.log(res)
            });               
          },
          closeEdit(){
              this.is_show=false;
          },

          confirmEdit(){
              //这里调接口
              this.is_show=false;
              if(this.pre_id==''){
                  this.$message.error("未选择退化后的宠物模板");
                  return
              }else if(this.ev_ids.length==0){
                  this.$message.error("未选择进化后的宠物模板");
                  return
              }
              let msg={
                  "_id":this.cur_select_pet_template_id,
                  "pre_id":this.pre_id,
                  "ev_ids":this.ev_ids
              }
            this.$ajax({
                method: 'post',
                url: 'edit_evolve_line',
                data: msg
            }).
            then(res => {
                this.getPetTemplates()
                this.$message.success("编辑成功！");
                
            });                            
          },
      },
  }
</script>


<style lang="scss" scoped>
    .page{
        margin-top: 1%;
        margin-left: 75%;
        margin-left: 80%;
    }
    .evolve-box{
        width: 90%;
        display: flex;
    }
    .pre-evolve{
        width: 45%;
        height: 100px;
        padding-left: 3%;
    }
    .evolved{
        width: 45%;
        padding-left: 3%;
    }
    .select-box{
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }
</style>
